<template>
	<el-dialog title="邀请好友" :visible.sync="visible" width="50%" :modal-append-to-body="false" :append-to-body="false" :before-close="onClose">
		<div class="agm-container">
			<div class="agm-l-box">
				<el-input class="qa" placeholder="搜索好友" v-model="searchText">
					<i class="el-icon-search el-input__icon" slot="suffix"> </i>
				</el-input>
				<el-scrollbar style="height:400px;" ref="friendScrollbar">
					<div class="friend-list">
						<div v-for="(friend,index) in displayFriends" :key="friend.id">
							<friend-item v-show="friend.nickName.includes(searchText)" :showDelete="false"
								@click.native="onSwitchCheck(friend)" :menu="false" :friend="friend" :index="index"
								:active="false">
								<el-checkbox :disabled="friend.disabled" @click.native.stop="" class="agm-friend-checkbox"
									v-model="friend.isCheck" size="medium"></el-checkbox>
							</friend-item>
						</div>
						<div v-if="loading" class="loading-text">加载中...</div>
					</div>
				</el-scrollbar>
			</div>
			<div class="agm-arrow el-icon-d-arrow-right"></div>
			<div class="agm-r-box">
				<div class="agm-select-tip"> 已勾选{{checkCount}}位好友</div>
				<el-scrollbar style="height:400px;">
					<div v-for="(friend,index) in friends" :key="friend.id">
						<friend-item v-if="friend.isCheck && !friend.disabled" :friend="friend" :index="index"
							:active="false" @del="onRemoveFriend(friend,index)" :menu="false">
						</friend-item>
					</div>
				</el-scrollbar>
			</div>
		</div>
		<span slot="footer" class="dialog-footer">
			<el-button @click="onClose()">取 消</el-button>
			<el-button type="primary" @click="onOk()">确 定</el-button>
		</span>
	</el-dialog>
</template>

<script>
	import FriendItem from '../friend/FriendItem.vue';

	export default {
		name: "addGroupMember",
		components: {
			FriendItem
		},
		data() {
			return {
				searchText: "",
				friends: [],
				displayFriends: [],
				pageSize: 15,
				currentPage: 1,
				loading: false
			}
		},
		methods: {
			onClose() {
				this.$emit("close");
			},
			onOk() {
				let inviteVO = {
					groupId: this.groupId,
					friendIds: [],
					loginName:this.name
				}
				this.friends.forEach((f) => {
					if (f.isCheck && !f.disabled) {
						inviteVO.friendIds.push(f.id);
					}
				})
				if(this.isAdd){//新创建
					let params={
						ids: inviteVO.friendIds,
					}
					this.$http({
						url: '/group/create',
						method: 'POST',
						data:params
					}).then(res=>{
						if(res){
							this.$message.success("创建成功！");
							//this.$emit("reload");
							this.$emit("close");
						}
					})
				}else{//添加人员
					if (inviteVO.friendIds.length > 0) {
						this.$http({
							url: "/group/invite",
							method: 'post',
							data: inviteVO
						}).then(() => {
							this.$message.success("邀请成功");
							this.$emit("reload");
							this.$emit("close");
						})
					}
				}
			},
			onRemoveFriend(friend, index) {
				friend.isCheck = false;
			},
			onSwitchCheck(friend) {
				if (!friend.disabled) {
					friend.isCheck = !friend.isCheck
				}
			},
			initFriendsList() {
				this.friends = [];
				this.$store.state.friendStore.friends.forEach((f) => {
					let friend = JSON.parse(JSON.stringify(f));
					let m = this.members.filter((m) => !m.quit)
						.find((m) => m.userId == f.id);
						
					if(friend.isdel) {
						friend.disabled = true;
						friend.isCheck = true;
					} else {
						if (m && !this.isAdd) {
							friend.disabled = true;
							friend.isCheck = true;
						} else {
							friend.disabled = false;
							friend.isCheck = false;
						}
					}
					this.friends.push(friend);
				});
				
				this.displayFriends = this.friends.slice(0, this.pageSize);
			},
			handleScroll() {
				const scrollbar = this.$refs.friendScrollbar.$refs.wrap;
				const scrollHeight = scrollbar.scrollHeight;
				const scrollTop = scrollbar.scrollTop;
				const clientHeight = scrollbar.clientHeight;
				
				if (scrollHeight - scrollTop - clientHeight < 30 && !this.loading) {
					this.loadMore();
				}
			},
			bindScrollEvent() {
				this.$nextTick(() => {
					if (this.$refs.friendScrollbar) {
						const scrollbar = this.$refs.friendScrollbar.$refs.wrap;
						scrollbar.addEventListener('scroll', this.handleScroll);
					}
				});
			},
			unbindScrollEvent() {
				if (this.$refs.friendScrollbar) {
					const scrollbar = this.$refs.friendScrollbar.$refs.wrap;
					scrollbar.removeEventListener('scroll', this.handleScroll);
				}
			},
			loadMore() {
				if (this.loading) return;
				
				const start = this.currentPage * this.pageSize;
				if (start >= this.friends.length) return;
				
				this.loading = true;
				setTimeout(() => {
					const end = start + this.pageSize;
					const newFriends = this.friends.slice(start, end);
					this.displayFriends = [...this.displayFriends, ...newFriends];
					this.currentPage++;
					this.loading = false;
				}, 100);
			},
			resetLoad() {
				this.currentPage = 1;
				this.displayFriends = this.friends.slice(0, this.pageSize);
			}
		},
		props: {
			visible: {
				type: Boolean
			},
			groupId: {
				type: String,
				default:'0',
			},
			members: {
				type: Array
			},
			isAdd:{
				type:Boolean
			}
		},
		computed: {
			checkCount() {
				return this.friends.filter((f) => f.isCheck && !f.disabled).length;
			}
		},
		watch: {
			visible(newVal) {
				if (newVal) {
					this.initFriendsList();
					this.bindScrollEvent();
				} else {
					this.unbindScrollEvent();
				}
			},
			searchText() {
				this.resetLoad();
			}
		},
		beforeDestroy() {
			this.unbindScrollEvent();
		}

	}
</script>

<style lang="scss">
.qa input{
	margin-top:auto
}
	.agm-container {
		display: flex;
		.agm-l-box {
			flex: 1;
			border: #587FF0 solid 1px;
			border-radius: 5px;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			
			.qa {
				flex-shrink: 0;
				margin-bottom: 10px;
			}

			.el-scrollbar {
				flex: 1;
				
				.el-scrollbar__wrap {
					overflow-x: hidden;
				}
			}

			.friend-list {
				padding: 10px;
			}

			.agm-friend-checkbox {
				margin-right: 20px;
			}
		}

		.agm-arrow {
			display: flex;
			align-items: center;
			font-size: 20px;
			padding: 10px;
			font-weight: 600;
			color: #687Ff0;
		}

		.agm-r-box {
			flex: 1;
			border: #587FF0 solid 1px;
			border-radius: 5px;

			.agm-select-tip {
				text-align: left;
				height: 40px;
				line-height: 40px;
				text-indent: 5px;
			}
		}

		.loading-text {
			text-align: center;
			padding: 10px;
			color: #999;
		}
	}

	.el-scrollbar__wrap {
		overflow-x: hidden !important;
	}

	.el-scrollbar__bar.is-horizontal {
		display: none;
	}
</style>